import '../vendor/cropbox.js';
import {connect} from 'react-redux';
var React = require('react');
var token = $.cookie('token');
var mytoken = JSON.parse(token);
import {notification} from 'antd';
var PersonalCenter = React.createClass({
    componentWillMount: function () {
        var _this = this;
        $.ajax({
            type: "GET",
            url: "/api/Employee/GetUserInformation",
            headers: {
                Authorization: "Bearer " + mytoken.access_token
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                _this
                    .props
                    .changeUserDetails(data)
            },
            error: function (msg) {
                alert(msg);
            }
        });
    },
    componentDidMount: function () {
        var _this = this;
        var options1 = {
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: this.props.userDetails.UserAvatar
        }
        var cropper = $('.imageBox').cropbox(options1);
        $('#upload-file').on('change', function () {

            var reader = new FileReader();
            reader.onload = function (e) {
                options1.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options1);
            }
            reader.readAsDataURL(this.files[0]);
        })
        $('#btnCrop').on('click', function () {
            var img = cropper.getDataURL();
            $('.cropped').html('');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shad' +
                    'ow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-sh' +
                    'adow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
            $('.cropped').append('<img src="' + img + '" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-sh' +
                    'adow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
        })
        $('#btnZoomIn').on('click', function () {
            cropper.zoomIn();
        })
        $('#btnZoomOut').on('click', function () {
            cropper.zoomOut();
        })
        $('#change-button').click(function () {
            var img = cropper.getDataURL();
            $.ajax({
                type: "post",
                url: "/api/Employee/ChangeUserAvatar",
                headers: {
                    Authorization: "Bearer " + mytoken.access_token
                },
                data: {
                    "": img
                },
                dataType: "json",
                success: function (data) {
                    _this
                        .props
                        .changeUserDetails(data);
                    $('#change-user').modal('hide');
                    notification.open({message: '操作提示', description: '操作成功', placement: 'bottomRight', type: 'success'});

                },
                error: function (msg) {
                    alert("上传失败");
                }
            });

        })
        $(".form_datetime").datetimepicker({format: "yyyy-mm-dd", autoclose: true, todayBtn: true, startDate: this.props.userDetails.Birthday});
        $("#change-user-details").click(function () {
            $.ajax({
                type: "post",
                url: "/api/Employee/ChangeUserDetails",
                headers: {
                    Authorization: "Bearer " + mytoken.access_token
                },
                data: $('#change-user-details-from').serialize(),
                dataType: "json",
                success: function (data) {
                    _this
                        .props
                        .changeUserDetails(data);
                    $('#myModal').modal('hide');
                    notification.open({message: '操作提示', description: '操作成功', placement: 'bottomRight', type: 'success'});
                },
                error: function (msg) {
                    alert("修改失败");
                }
            });
        });
    },
    render: function () {
        return (
            <div>
                <section className="content-header">
                    <h1>
                        个人中心
                        <small>信息概览</small>
                    </h1>
                    <ol className="breadcrumb">
                        <li>
                            <a href="#">
                                <i className="fa fa-dashboard"></i>
                                Stage</a>
                        </li>
                        <li>
                            <a href="#">个人中心</a>
                        </li>
                        <li className="active">概览</li>
                    </ol>
                </section>
                <br/>
                <div className="box">
                    <div className="box-header with-border">
                        <h3 className="box-title">信息概览</h3>
                        <div className="box-tools pull-right">

                            <span className="label label-primary">个人信息</span>
                        </div>
                    </div>
                    <div className="box-body">
                        <div className="info-box">
                            <img
                                id="person-img"
                                data-toggle="modal"
                                data-target="#change-user"
                                src={this.props.userDetails.UserAvatar}></img>
                            <div className="info-box-content">
                                <span className="info-box-text">
                                    <label>昵称：</label>{this.props.userDetails.NickName}</span>
                                <span className="info-box-text">
                                    <label>生日：</label>{this.props.userDetails.Birthday}</span>
                                <span className="info-box-text">
                                    <label>性别：</label>{this.props.userDetails.Gender}</span>
                                <span className="info-box-text">
                                    <label>手机：</label>{this.props.userDetails.PhoneNumber}</span>
                                <span className="info-box-text">
                                    <label>邮箱：</label>{this.props.userDetails.Email}</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div
                            className="modal fade"
                            id="change-user"
                            tabIndex="-1"
                            role="dialog"
                            aria-labelledby="myModalLabel"
                            aria-hidden="true">
                            <div className="modal-dialog">
                                <div className="modal-content">
                                    <div className="modal-header">
                                        <button type="button" className="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        <h4 className="modal-title" id="myModalLabel">更改头像

                                        </h4>
                                    </div>
                                    <div className="modal-body">
                                        <div className="imageBox">
                                            <div className="thumbBox"></div>
                                            <div
                                                className="spinner"
                                                style={{
                                                display: "none"
                                            }}>Loading...</div>
                                        </div>
                                        <div className="action">
                                            <div className="new-contentarea tc">
                                                <a href="javascript:void(0)" className="upload-img">
                                                    <label htmlFor="upload-file">上传图像</label>
                                                </a>
                                                <input type="file" className="" name="upload-file" id="upload-file"/>
                                            </div>
                                            <input type="button" id="btnCrop" className="Btnsty_peyton" value="裁切"/>
                                            <input type="button" id="btnZoomIn" className="Btnsty_peyton" value="+"/>
                                            <input type="button" id="btnZoomOut" className="Btnsty_peyton" value="-"/></div>
                                        <div className="cropped"></div>
                                    </div>
                                    <div className="modal-footer">
                                        <button type="button" className="btn btn-default" data-dismiss="modal">关闭</button>
                                        <button type="button" id="change-button" className="btn btn-primary">提交更改</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="box-footer">
                        <h4>
                            <span
                                style={{
                                display: 'left',
                                cursor: 'pointer'
                            }}
                                className="label label-primary"
                                data-toggle="modal"
                                data-target="#myModal">编辑</span>
                            <span
                                style={{
                                float: 'right',
                                cursor: 'pointer'
                            }}
                                className="label label-danger"
                                data-toggle="modal"
                                data-target="#myModal">更改密码</span>
                        </h4>
                        <div
                            className="modal fade"
                            id="myModal"
                            role="dialog"
                            aria-labelledby="myModalLabel"
                            aria-hidden="true">
                            <div className="modal-dialog">
                                <div className="modal-content">
                                    <div className="modal-header">
                                        <button type="button" className="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 className="modal-title" id="myModalLabel">
                                            更改个人信息
                                        </h4>
                                    </div>
                                    <div className="modal-body">
                                        <form role="form" id="change-user-details-from">
                                            <table className="table">
                                                <thead>
                                                    <tr>
                                                        <th>名称</th>
                                                        <th>信息</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>
                                                            <h4>
                                                                <span className="label label-primary">昵称</span>
                                                            </h4>
                                                        </td>
                                                        <td><input
                                                            type="text"
                                                            className="form-control"
                                                            id="name"
                                                            placeholder={this.props.userDetails.NickName}
                                                            name='NickName'/></td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h4>
                                                                <span className="label label-primary">生日</span>
                                                            </h4>
                                                        </td>
                                                        <td>
                                                            <div
                                                                className="input-append date form_datetime"
                                                                data-date={this.props.userDetails.Birthday}>
                                                                <input size="16" className="form-control" type="text" value="" name='Birthday'/>
                                                                <span className="add-on">
                                                                    <i className="icon-remove"></i>
                                                                </span>
                                                                <span className="add-on">
                                                                    <i className="icon-calendar"></i>
                                                                </span>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h4>
                                                                <span className="label label-primary">性别</span>
                                                            </h4>
                                                        </td>
                                                        <td>
                                                            <select className="form-control" name='Gender'>
                                                                <option>男</option>
                                                                <option>女</option>
                                                            </select>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h4>
                                                                <span className="label label-primary">手机</span>
                                                            </h4>
                                                        </td>
                                                        <td><input
                                                            type="text"
                                                            className="form-control"
                                                            id="name"
                                                            placeholder={this.props.userDetails.PhoneNumber}
                                                            name='PhoneNumber'/></td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <h4>
                                                                <span className="label label-primary">Email</span>
                                                            </h4>
                                                        </td>
                                                        <td><input
                                                            type="text"
                                                            className="form-control"
                                                            id="name"
                                                            placeholder={this.props.userDetails.Email}
                                                            name='Email'/></td>
                                                    </tr>

                                                </tbody>
                                            </table>
                                        </form>
                                    </div>
                                    <div className="modal-footer">
                                        <button type="button" className="btn btn-default" data-dismiss="modal">关闭
                                        </button>
                                        <button type="button" className="btn btn-primary" id="change-user-details">
                                            提交更改
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="box">
                    <div className="box-header with-border">
                        <h3 className="box-title">入职信息</h3>
                        <div className="box-tools pull-right">

                            <span className="label label-primary">信息详情</span>
                        </div>
                    </div>
                    <div className="box-body">
                        <ul className="timeline">
                            <li className="time-label">
                                <span className="bg-red">
                                    {this.props.userDetails.CreateTime}
                                </span>
                            </li>
                            <li>
                                <i className="fa fa-envelope bg-blue"></i>
                                <div className="timeline-item">
                                    <span className="time">
                                        <i className="fa fa-clock-o"></i>
                                        {this.props.userDetails.CreateTime}</span>

                                    <h3 className="timeline-header">
                                        <a href="#">{this.props.userDetails.NickName}</a>
                                    </h3>

                                    <div className="timeline-body">
                                        <a href="#">职位：</a>{this.props.userDetails.Position}
                                    </div>

                                    <div className="timeline-footer">
                                        <a
                                            className="btn btn-primary btn-xs"
                                            style={{
                                            marginLeft: '1100px'
                                        }}>Stage</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div id="person-info">
                    <div className="col-md-3 col-sm-6 col-xs-12">
                        <div className="info-box">
                            <span className="info-box-icon bg-blue">
                                <i className="fa fa-envelope-o"></i>
                            </span>
                            <div className="info-box-content">
                                <span className="info-box-text">通知</span>
                                <span className="info-box-number">4</span>
                                <span className="info-box-text">
                                    <button type="button">点击查看</button>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div className="col-md-3 col-sm-6 col-xs-12">
                        <div className="info-box">

                            <span className="info-box-icon bg-red">
                                <i className="fa fa-bell"></i>
                            </span>
                            <div className="info-box-content">
                                <span className="info-box-text">提醒</span>
                                <span className="info-box-number">10</span>
                                <span className="info-box-text">
                                    <button type="button">点击查看</button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});
const mapStateToProps = (state) => {
    return {userMenu: state.userMenu, userDetails: state.userDetails}
}
const mapDispatchToProps = {
    changeUserDetails: (data) => {
        return {type: 'CHANGE_USERDATA', data: data}
    }
}
PersonalCenter = connect(mapStateToProps, mapDispatchToProps)(PersonalCenter)
module.exports = PersonalCenter;